<template>
  <div class="batch scrollbar-wrap">
    <div class="batch-head">
      <header-select :level="2" :is-statement="true" @selectBuilding="getBuilding" />
      <span class="type-tab">
        <el-checkbox v-model="queryParams.haveOld" class="checkbox-have-old" true-label="1" false-label="0" label="旧工序" border size="small" @change="getBuilding(queryParams.buildingId)" />
        <el-tag class="tab">验收合格</el-tag>
        <el-tag class="tab" type="danger">验收不合格</el-tag>
        <el-tag class="tab" type="warning">待验收</el-tag>
        <el-tag class="tab" type="info">未报验</el-tag>
      </span>
    </div>
    <el-scrollbar v-loading="loading" style="height: calc(100vh - 140px);" element-loading-text="拼命加载中">
      <div
        v-for="(item, indexT) in table"
        :key="indexT"
        class="batch-table-wrap"
      >
        <el-table
          :key="Math.random()"
          size="mini"
          :data="item.children"
          :span-method="spanMethod"
          class="batch-table"
          @row-click="rowClick"
        >
          <el-table-column
            align="center"
            min-width="260"
          >
            <template slot="header">
              <el-tag size="small" type="danger">{{ item.name }}</el-tag>
            </template>
            <template slot-scope="scope">
              <el-popover
                placement="top-start"
                trigger="click"
              >
                <div class="ellipsis-all-content">{{ scope.row.name }}</div>
                <span slot="reference" class="ellipsis">{{ scope.row.name }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(floor , index) in tableProps"
            :key="'floor' + index"
            :label="floor + '层'"
            align="center"
            min-width="100"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.children.length > 0" class="table-tab">
                <el-tag v-if="scope.row.children[index].type === 10" size="mini" class="tab">
                  {{ scope.row.children[index].batch ? `第${scope.row.children[index].batch}批次` : '' }}
                </el-tag>
                <el-tag v-else-if="scope.row.children[index].type === 11" size="mini" class="tab" type="danger">
                  {{ scope.row.children[index].batch ? `第${scope.row.children[index].batch}批次` : '' }}
                </el-tag>
                <el-tag v-else-if="scope.row.children[index].type === -1" size="mini" class="tab" type="warning">
                  {{ scope.row.children[index].batch ? `第${scope.row.children[index].batch}批次` : '' }}
                </el-tag>
                <el-tag v-else size="mini" class="tab" type="info">
                  {{ scope.row.children[index].batch ? `第${scope.row.children[index].batch}批次` : '' }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import HeaderSelect from './components/HeaderSelect'
import { getKeyChecktableInspection } from '@/api/statement/statement'
export default {
  name: 'Batch',
  components: {
    HeaderSelect
  },
  data() {
    return {
      queryParams: {
        buildingId: '',
        haveOld: 0
      },
      table: [],
      tableProps: ['暂无楼'],
      loading: true
    }
  },
  watch: {
    '$route.query'(val) {
      if (val.buildingId !== undefined && val.buildingId !== this.queryParams.buildingId) {
        this.queryParams.buildingId = this.$route.query.buildingId
        this.queryParams.haveOld = this.$route.query.haveOld
        this.init()
      }
    }
  },
  created() {
    this.queryParams.buildingId = this.$route.query.buildingId
    // if (process.env.NODE_ENV === 'development') { // 测试使用
    this.queryParams.haveOld = this.$route.query.haveOld

    //   this.queryParams.buildingId = 'x9oAAAADbAsVnG6P'
    // }
    this.init()
  },
  methods: {
    getBuilding(buildingId) {
      if (!buildingId) return
      this.queryParams.buildingId = buildingId
      this.init()
    },
    rowClick(row, column, event) {
      console.log(row, column, event)
      if (row.children.some(item => item.type !== null)) {
        this.$router.push({ path: '/statement/RoleCheck', query: { checkTableId: row.fid, buildingId: this.queryParams.buildingId }})
      } else {
        this.$message.info('此工序没有报验数据。')
      }
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      let colspan = 1
      if (columnIndex > 0) {
        if (row.children[columnIndex - 1] && row.children[columnIndex - 1].colspan) {
          colspan = row.children[columnIndex - 1].colspan
        } else {
          colspan = 0
        }
      }
      return {
        rowspan: 1,
        colspan: colspan
      }
    },
    init() {
      this.loading = true
      getKeyChecktableInspection(this.queryParams).then(
        (response) => {
          if (response.code === 200) {
            if (response.data.tableData.length > 0) {
              this.table = response.data.tableData
            }
            if (response.data.floorList.length > 0) {
              this.tableProps = response.data.floorList
            }
          }
        }
      ).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .batch {
    .batch-head {
      margin: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .type-tab {
        .tab {
          margin-left: 10px;
        }
      }
    }
    .batch-table-wrap {
      padding:0 20px 20px 20px;
      .batch-table {
        border: 1px solid #dfe6ec;
        border-bottom: none;
      }
      .table-tab {
        cursor: pointer;
        .tab {
          display: block;
        }
      }
    }
  }
</style>
